<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5">
{
  style: {
    navigationBarTitleText: '我的订单',
    enablePullDownRefresh: true,
  },
}
</route>
<template>
  <div class="order">
    <template v-if="appStore.isLogged">
      <wd-sticky>
        <div class="custom-tabs">
          <wd-tabs
            v-model="tab"
            swipeable
            :lineWidth="24"
            :lineHeight="3"
            color="#070B1A"
            inactiveColor="#8A8F99"
          >
            <wd-tab v-for="(item, index) in tabList" :key="index" :title="item.title"></wd-tab>
          </wd-tabs>
        </div>
      </wd-sticky>

      <LoadPage ref="loadPage" url="/room-order-app/userPage">
        <template #default="{ list }">
          <div class="order-list" v-if="list.length > 0">
            <OrderItem v-for="(item, index) in list" :key="index" :order="item" />
          </div>
        </template>
        <template #empty>
          <Seat class="no-order" type="no-order" height="calc(100vh - 46px)" />
        </template>
      </LoadPage>
    </template>
    <!-- 占位，未登录 -->
    <Seat v-else type="no-login" />

    <TabBar :scrollTop="scrollTop" />
  </div>
</template>

<script lang="ts" setup>
import { useUserStore } from '@/store/index'
import OrderItem from './components/OrderItem.vue'

const appStore = useUserStore()

const tab = ref<number>(0)
const tabList = ref([
  {
    title: '全部',
    value: [],
  },
  {
    title: '待支付',
    value: [0],
  },
  {
    title: '进行中',
    value: [1, 2],
  },
  {
    title: '已完成',
    value: [3],
  },
])

onShow(() => {
  const index = uni.getStorageSync('orderStatusIndex')
  if (typeof index === 'number') {
    tab.value = index
  } else {
    uni.startPullDownRefresh()
  }
})

onHide(() => {
  uni.removeStorageSync('orderStatusIndex')
})

watch(
  () => tab.value,
  () => {
    uni.startPullDownRefresh()
  },
)

// 上拉加载
const loadPage = ref()
onReachBottom(() => {
  loadPage.value?.getMore({ statusList: tabList.value[tab.value].value })
})
// 下拉刷新
onPullDownRefresh(() => {
  if (appStore.isLogged) {
    loadPage.value?.getData({ statusList: tabList.value[tab.value].value }, true)
  } else {
    uni.stopPullDownRefresh()
  }
})

const scrollTop = ref(0)
onPageScroll((e) => {
  scrollTop.value = e.scrollTop
})

onHide(() => {
  scrollTop.value = 0
  uni.pageScrollTo({
    scrollTop: 0,
    duration: 0,
  })
})
</script>

<style scoped lang="scss">
.order {
  box-sizing: border-box;
  min-height: 100vh;
  font-size: 0;
  background-color: var(--bgc4);
  .order-list {
    padding: 28rpx 30rpx 0;
  }

  :deep(.no-order) {
    height: calc(100vh - 92rpx) !important;
  }
  :deep(.load-more) {
    padding-bottom: 180px;
    padding-bottom: calc(constant(safe-area-inset-bottom) + 180rpx) !important;
    padding-bottom: calc(env(safe-area-inset-bottom) + 180rpx) !important;
  }
}
</style>
